.issue--finish-toggle {
  @apply rounded-full border-base-content/70 bg-base-100 border text-base-content transition-all duration-300;
  @apply flex items-center justify-center;
  @apply cursor-pointer;

  --size: 1.1rem;
  height: var(--size);
  width: var(--size);
  min-height: var(--size);
  min-width: var(--size);

  font-size: 0.65rem;

  .finish-icon {
    display: none;
  }

  &:hover {
    @apply border-success;
    border-width: 2px;
  }

  &.finished {
    font-size: 0.65rem;
    @apply text-success border-success;

    &:not(:hover) {
      border: none;
      background: none;
    }

    .finish-icon {
      display: inline-block;
    }
  }
}

.issue--finish-toggle-wrapper.hover-animated {
  @apply transition-all duration-300;

  width: 0;
  opacity: 0;

  &:has(.finished) {
    @apply mr-1;
    opacity: 1;
    width: var(--size);
  }
}

.show-issue-finish-toggle-on-hover:hover {
  .issue--finish-toggle-wrapper {
    @apply mr-1;
    width: var(--size);
    opacity: 1;
  }
}
